<template>
  <van-swipe
    id="banner-swipe"
    :autoplay="3000"
    :show-indicators="false"
    @change="onSwipeChange"
  >
    <van-swipe-item
      v-for="(banner, index) in bannerList"
      :key="banner.id"
      @click="GoTarget(banner, index)"
    >
      <img :src="banner.imgUrl" alt="" />
    </van-swipe-item>
    <div v-if="showIndicator" slot="indicator" class="custom-indicator">
      {{ `${curIndex + 1}/${total}` }}
    </div>
  </van-swipe>
</template>

<script>
export default {
  name: 'bannerList',
  props: {
    bannerList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      curIndex: 0,
      isStopExpose: false
    };
  },
  computed: {
    total() {
      return this.bannerList.length;
    },
    showIndicator() {
      return this.bannerList.length > 1;
    }
  },
  methods: {
    onSwipeChange(index) {
      // console.log('onSwipeChange====', index)
      this.curIndex = index;
    },
    GoTarget(banner, index) {
      this.$emit('bannerChange', banner);
    }
  }
};
</script>

<style lang="scss" scoped>
#banner-swipe {
  position: relative;
  width: 355px;
  height: 114px;
  margin: 10px auto 10px;
  padding: 2px 0 0;
  border-radius: 6px;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
  }
  .custom-indicator {
    position: absolute;
    right: 10px;
    bottom: 8px;
    background-color: rgba(0, 0, 0, 0.4);
    font-size: 12px;
    color: #fff;
    padding: 1px 8px;
    border-radius: 10px;
  }
}
</style>
